<template>
  <div class="app-container">
    <div class="container">
      <el-row :gutter="20" class="filter-container">
        <el-col :span="13">
          <el-breadcrumb separator="">
<!--            <el-breadcrumb-item :to="$route.query.type == 'softmanage'?'/softManage/softManage':'/dashboard'"><i-->
              <el-breadcrumb-item  :to="backUrl"><i
              class="el-icon-arrow-left"
              style="cursor: pointer;"
            >返回</i></el-breadcrumb-item>
            <!-- <el-breadcrumb-item>软件库/</el-breadcrumb-item>
            <el-breadcrumb-item v-if="$route.query.software != 'up'">软件详情</el-breadcrumb-item>
            <el-breadcrumb-item v-else>已安装软件详情</el-breadcrumb-item> -->
          </el-breadcrumb>
        </el-col>
      </el-row>
      <el-row class="margin-top20">
        <el-col :span="22" :offset="1">
          <el-row>
            <el-col :span="18">
              <img
                v-if="ruleForm.logo"
                style="width: 48px; height: 48px;margin-right: 10px; float:left"
                :src="ruleForm.logo"
                fit="fit"
              >
              <img
                v-else
                style="width: 48px; height: 48px;margin-right: 10px; float:left"
                src="../../assets/images/logMoren.png"
                fit="fit"
              >
              <label style="font-size:25px">{{ ruleForm.softVersion }}</label><br>
              <span style="color: #999999">软件名称:&nbsp;{{ ruleForm.name }}</span>
              <el-divider direction="vertical" />
              <span style="color: #999999">大小:&nbsp;{{ ruleForm.sizeWithUnit }}</span>
              <el-divider direction="vertical" />
              <span style="color: #999999">更新:&nbsp;{{ ruleForm.updateTime }}</span><br>
              <el-tag type="success" size="mini"><svg-icon icon-class="ico_安全认证" />安全认证</el-tag>&nbsp;
              <el-tag size="mini"><svg-icon icon-class="ico_正式版" />正式版</el-tag>&nbsp;
              <el-tag type="danger" size="mini"><svg-icon icon-class="ico_无插件" />无插件</el-tag>
            </el-col>
<!--            <el-col :span="3" :offset="0" style="text-align: right;">-->
<!--              <el-button v-if="$route.query.software == 'up'" plain size="mini">卸载</el-button>-->
<!--              <el-button v-else type="primary" size="mini" @click="handleEdit">下载文档/软件</el-button>-->
<!--            </el-col>-->
            <el-col :span="6" :offset="0" style="text-align: right;">
              <el-button
                v-if="this.ruleForm.webUrl"
                type="primary"
                size="mini"
                @click="handleEdit('open')"
              >下载页面</el-button>
              <el-button type="primary" size="mini" @click="handleEdit">下载</el-button>
            </el-col>
          </el-row>
        </el-col>
        <el-col v-if="ruleForm.imgsArr&&ruleForm.imgsArr.length>0" :span="22" :offset="1" class="margin-top20">
          <div class="lineBanner">
            <swiper v-if="ruleForm.imgsArr&&ruleForm.imgsArr.length>0" ref="mySwiper" :options="swiperOptionMultiple">
              <swiper-slide v-for="(item, index) in ruleForm.imgsArr" :key="index">
                <div class="campusList">
                  <el-image
                    :src="item"
                    title="软件介绍图"
                    style="width: 100%;height:350px"
                    fit="scale-down"
                  >
                    <!-- <p>{{item.detail}}</p>
                                <label>{{item.peopleCount}}</label> -->
                  </el-image></div>
              </swiper-slide>
              <!-- <div slot="button-prev" class="swiper-button-prev" /> -->
              <!-- <div slot="button-next" class="swiper-button-next" /> -->
            </swiper>
          </div>
        <!-- <el-carousel :interval="4000" type="card" height="250px">
          <el-carousel-item v-for="item in 6" :key="item" />
        </el-carousel> -->
        </el-col>
        <el-col
          v-if="ruleForm.imgsArr&&ruleForm.imgsArr.length>0"
          :span="1"
          calss="right-icons"
          style="
            height: 420px;
          opacity: .35;
            font-size: 43px;
          padding-top: 200px;"
        ><i class="el-icon-arrow-right" /></el-col>
        <el-col :span="22" :offset="1" class="margin-top20">
          <span><b>软件介绍</b></span>
          <div style="height: 80px;width: 90%">
            <p>{{ ruleForm.descr }}</p>
          </div>
        </el-col>
        <el-col :span="3" :offset="1" class="margin-top20">
          <span><b>软件编号</b></span>
          <p>{{ softCache.softNumber }}</p>
        </el-col>
        <el-col :span="3" :offset="1" class="margin-top20">
          <span><b>软件类型</b></span>
          <p>{{ typeToName(softCache.typeId,'typeId') }}</p>
        </el-col>
        <el-col :span="3" :offset="1" class="margin-top20">
          <span><b>采购部门</b></span>
          <p>{{ typeToName(softCache.departId,'departId') }}</p>
        </el-col>
        <el-col

          :span="3"
          :offset="1"
          class="margin-top20"
        >
          <span><b>所在网络</b></span>
          <p>{{ softCache.networkType ==1 ? '内网' : '外网' }}</p>
        </el-col>
        <el-col
          :span="3"
          :offset="1"
          class="margin-top20"
        >
          <span><b>是否国内</b></span>
          <p>{{ softCache.softFrom ==1 ? '国内' : '国外' }}</p>
        </el-col>
        <el-col
          :span="3"
          :offset="1"
          class="margin-top20"
        >
          <span><b>采购时间</b></span>
          <p>{{ softCache.purchaseDate.slice(0,10) || '2020-09-09' }}</p>
        </el-col>
        <el-col
          v-if="softCache.purchaseAmount && $route.query.type == 'softmanage'"
          :span="3"
          :offset="1"
          class="margin-top20"
        >
          <span><b>采购金额</b></span>
          <p>{{ softCache.purchaseAmount }}元</p>
        </el-col>
        <el-col
          :span="3"
          :offset="1"
          class="margin-top20"
        >
          <span><b>许可类型</b></span>
          <p>{{ softCache.permitType ==1 ? '数量授权' : '场地授权' }}</p>
        </el-col>
        <el-col
          v-if="softCache.permitCount &&$route.query.type == 'softmanage'"
          :span="3"
          :offset="1"
          class="margin-top20 strinExceeds2"
        >
          <span><b>许可数量</b></span>
          <el-tooltip class="item" effect="dark" :content="softCache.permitCount" placement="top">
            <p>{{ softCache.permitCount }}</p>
          </el-tooltip>
        </el-col>
        <el-col
          :span="3"
          :offset="1"
          class="margin-top20"
        >
          <span><b>授权方式</b></span>
          <p>{{ softCache.permitMode ==1 ? '永久授权' : softCache.permitMode ==2 ? '年度授权' : '无授权' }}</p>
        </el-col>
        <el-col
          :span="3"
          :offset="1"
          class="margin-top20"
        >
          <span><b>使用范围</b></span>
          <p>{{ typeToName(softCache.useRange,'useRange') }}</p>
        </el-col>
        <el-col
          :span="3"
          :offset="1"
          class="margin-top20"
        >
          <span><b>使用状态</b></span>
          <p>{{ softCache.useState ==1 ? '正在使用' : '停止使用' }}</p>
        </el-col>
        <el-col
          :span="3"
          :offset="1"
          class="margin-top20"
        >
          <span><b>许可期限</b></span>
          <p>{{ softCache.permitMode ==1?'永久':softCache.permitEndDate.slice(0,10) }}</p>
        </el-col>
        <el-col :span="3" :offset="1" class="margin-top20">
          <span><b>管理员</b></span>
          <p>{{ softCache.manageName?softCache.manageName:'无' }}</p>
        </el-col>
        <el-col :span="3" :offset="1" class="margin-top20">
          <span><b>技术员</b></span>
          <p>{{ softCache.technologyName?softCache.technologyName:'无' }}</p>
        </el-col>
        <el-col :span="3" :offset="1" class="margin-top20">
          <span><b>技术员电话</b></span>
          <p>{{ softCache.technologyPhone?softCache.technologyPhone:'无' }}</p>
        </el-col>
        <!-- <el-col :span="3" :offset="1" class="margin-top20">
          <span><b>序列号</b></span>
          <p>{{ softCache.serialNumber }}</p>
        </el-col> -->
        <el-col
          v-if="ruleForm.secretKeyType == 1 && $route.query.type == 'detail'"
          :span="23"
          :offset="1"
          class="margin-top20"
        >
          <span><b>我的秘钥</b></span>
          <p />
          <el-button
            type="primary"
            size="mini"
            @click="softSecretApply(1)"
          ><i
            class="el-icon-key"
          />申请秘钥</el-button> <svg-icon icon-class="ico_申请" />
          <span
            v-if="applyfalg"
          >已发起秘钥申请，审批中</span>
          <span
            v-if="applyfalg == null"
          >{{ mySecretKey }}</span>
          <!-- <el-form
            v-if="applyfalg == null"
            :inline="true"
            size="mini"
          >
            <el-input
              v-if="applyfalg ==null && mySecretKey != '无秘钥'"
              v-model="mySecretKey"
              disabled
              class="el-input-width"
              size="mini"
            />
            <el-button
              v-if="applyfalg == null && mySecretKey != '无秘钥'"
              type="text"
              class="margin-left10"
              size="mini"
              @click.prevent="copySpecialTopicUrl()"
            >
              复制
            </el-button>
            <el-button type="danger" class="margin-left10" size="mini" @click.prevent="removeDomain(domain)">
              回收秘钥
            </el-button>
          </el-form> -->
        </el-col>
      </el-row>
    </div>

    <el-dialog class="iframe-parent"  :visible.sync="dialogOpenUrl" top="8vh" width="80%" height="90%">
      <iframe
        :src="openUrlCache"
        scrolling="auto"
        class="innerIframe"
        frameborder="1"
        marginheight="10px"
      />
    </el-dialog>
  </div>
</template>

<script>
import { softSecretApply, softSecretSoft, softTypeList,
  softNamePage } from '@/api/softManage'
import {
  departmentList
} from '@/api/department'
import { Alert } from 'element-ui'
export default {
  components: {
  },
  data() {
    return {
      backUrl:'', //返回地址
      openurlTitle: '链接',
      openUrlCache: '',
      dialogOpenUrl: false,
      options: [],
      options1: [{
        id: '1',
        name: '技术部'
      }, {
        id: '2',
        name: '合同部'
      }],
      options2: [{
        id: '1',
        name: '账号密码'
      }, {
        id: '2',
        name: '关联登录'
      }],
      options3: [{
        id: '1',
        name: '内网'
      }, {
        id: '2',
        name: '外网'
      }],
      options4: [{
        id: '1',
        name: '国内'
      }, {
        id: '2',
        name: '国外'
      }],
      options5: [{
        id: '1',
        name: '数量授权'
      }, {
        id: '2',
        name: '场地授权'
      }],
      options6: [{
        id: '1',
        name: '永久授权'
      }, {
        id: '2',
        name: '年度授权'
      }],
      options7: [{
        id: '1',
        name: '公司全体'
      }, {
        id: '2',
        name: '计划合同部'
      }, {
        id: '3',
        name: '正版软件服务器'
      }
      ],
      options8: [{
        id: '1',
        name: '正在使用'
      }, {
        id: '2',
        name: '无使用'
      }
      ],
      options9: [{
        id: '1',
        name: '中间间软件'
      }, {
        id: '2',
        name: '通信软件'
      }
      ],
      softCache: {},
      mySecretKey: '无秘钥',
      applyfalg: false,
      ruleForm: {
        secretKeyList: '1',
        imgs: '',
        name: '',
        typeId: '1026',
        logo: '',
        fileMd5: '',
        delivery: false,
        type: [],
        secretKeyType: '1',
        descr: ''
      },
      swiperOptionMultiple: {
        loop: false,
        autoplay: {
          delay: 5000,
          stopOnLastSlide: true,
          disableOnInteraction: false,
          watchSlidesVisibility: true
        },
        slidesPerView: 3,
        spaceBetween: 15,
        navigation: {
          nextEl: '.swiper-button-next'
          // prevEl: '.swiper-button-prev'
        },
        on: {
          tap: function(e) {
          }
        }
      }
    }
  },
  created() {
    // $route.query.type == 'softmanage'?'/softManage/softManage':'/dashboard'
    switch (this.$route.query.type) {
      case 'detail':
        this.backUrl='/dashboard'
        break;
      case 'softmanage':
        this.backUrl='/softManage/softManage'
        break;
      case 'applyManage':
        this.backUrl='/applyManage/applyManage'
        break;
    }

    this.getDepartmentList()
    this.softNamePage()
    this.getTypeList()
    if (this.$route.query.software) {
      // if (this.$route.query.type === 'apply') {
      //   softSecretApply({
      //     id: this.$route.query.software.id
      //   }).then(res => {
      //     // console.log(res)
      //     if (res.data.code === 200) {
      //       this.$message.success('申请秘钥成功')
      //       this.mySecretKey = res.data.data
      //       this.applyfalg = false
      //     }
      //   }).catch(() => {
      //     this.applyfalg = false
      //   })
      // }
      this.softCache = this.$route.query.software
      this.softSecretApply(0)
      this.logoUrl = this.$route.query.software.logo
      this.ruleForm = this.$route.query.software
    }
  },
  methods: {
    typeToName(params, type) {
      if (type == 'typeId') {
        return this.options.filter(item => item.id == params)[0]
          ? this.options.filter(item => item.id == params)[0].name : '无'
      } else if (type == 'departId') {
        return this.options1.filter(item => item.id == params)[0]
          ? this.options1.filter(item => item.id == params)[0].name : '无'
      } else if (type == 'useRange') {
        return this.options7.filter(item => item.id == params)[0]
          ? this.options7.filter(item => item.id == params)[0].name : '公司全体'
      }
    },
    getTypeList() {
      softTypeList({
        limit: 20,
        page: 1
      }).then(res => {
        if (res.code === 200) {
          res.data.data.map(item => {
            if (item.id !== '1025' && item.id !== '55904214559285248') {
              this.options.push(item)
            }
          })
        }
      })
    },
    getDepartmentList() {
      departmentList({
        limit: 50,
        page: 1
      }).then(res => {
        if (res.code === 200) {
          this.options1 = []
          res.data.data.map(item => {
            if (item.id !== '1025' && item.id !== '55904214559285248') {
              this.options1.push(item)
            }
          })
        }
      })
    },
    softNamePage() {
      softNamePage({
        limit: 200,
        page: 1
      }).then(res => {
        if (res.code === 200) {
          this.options9 = res.data.data
        }
      })
    },
    softSecretApply(params) {
      softSecretApply({
        id: this.$route.query.software.id,
        type: params
      }).then(res => {
        console.log(res.data)
        if (res.code == 200) {
          if (res.message == '未申请') {
            this.applyfalg = false
          } else if (res.message == '已申请') {
            this.applyfalg = null
            this.mySecretKey = res.data
          } else if (res.message == '申请成功') {
            this.applyfalg = true
          } else {
            this.applyfalg = null
            this.mySecretKey = res.message
          }
          // this.$message.success('发送申请秘钥成功')
          // this.mySecretKey = res.data.data
          // this.applyfalg = true
        }
      }).catch(() => {
        this.applyfalg = false
      })
    },
    copySpecialTopicUrl() {
      var oInput = document.createElement('input') // 创建一个隐藏input（重要！）
      oInput.value = this.mySecretKey // 赋值
      document.body.appendChild(oInput)
      oInput.select() // 选择对象
      document.execCommand('Copy') // 执行浏览器复制命令
      oInput.className = 'oInput'
      oInput.style.display = 'none'
      this.$message.success('复制成功')
    },
    handleEdit(index, row) {
      // window.location.href = this.ruleForm.downloadUrl
      if (index === 'open') {
        this.dialogOpenUrl = true
        this.openUrlCache = this.ruleForm.webUrl
        this.openurlTitle = this.ruleForm.softVersion
        // window.open(row, '_blank');
      } else if (index === 'apply') {
        this.handleDetails('row', 'apply')
      } else {
        // window.location.href = this.ruleForm.downloadUrl
        window.location.href = 'http://10.10.10.11:9006/file/download?id=' + this.ruleForm.id

      }
    }
  }
}
</script>
<style>
  .margin-left10 {
    margin-left: 10px;
  }
  .el-upload-dragger{
      width: 260px  !important;
  }
</style>
<style lang="scss" scoped>
  p  {
    color: #999999;
    background:rgba(255,255,255,1);
  }
  .right-icons {
      height: 260px !important;
      opacity: .45 !important;
      font-size: 53 !important;
      padding-top: 130px !important;
  }
  .container {
      padding-top: 13px;
      background-color: #ffffff !important;
    }
  .lineBanner {
        box-sizing: border-box;
        padding: 10px;

        .campusList {
            P {
                margin-block-start: 0;
                margin-block-end: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: #303133;
                font-size: 14px;
            }

            label {
                color: #409EFF;
                font-size: 14px;
            }
        }
    }
  .el-carousel__item {
    background-size: cover; -moz-background-size: cover;
    /* color: #475669; */
    /* font-size: 14px; */
    opacity: 0.75;
    background-image: url('https://image.yxgd2020.itislevel.com/group1/M00/00/11/wKgAH18OQk-AS_njAABk1HK8-VI982.png');
    /* line-height: 250px; */
    margin: 0;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .el-upload-dragger{
      width: 260px  !important;
  }
  .el-upload{
    width:280px !important;
  }
  .el-upload {
    width:280px;
  }
  .el-textarea {
    width: 280px;
    height: 122px;
  }
  .margin-top20 {
    margin-top: 20px;
  }
  .el-input{
    width: 280px;
    height: 48px;
  }
  .el-select {
    width: 280px;
    height: 48px;
  }
  .strinExceeds2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
